<template>
    <div class="container">
        <div class="y_top row">
            <Input style='width:260px;' v-model="pageData.name" icon="ios-clock-outline" placeholder="按用户名搜索..." ></Input>
            <Button class="interval" type="primary" icon="ios-search" v-on:click="search">搜索</Button>
            <Button type="success" v-on:click="show">  添加  </Button>
            <Button class="interval" type="warning" v-on:click="allremove">  批量删除  </Button>
        </div>
        <div class="y_bottom">
            <div class="y_table">
                <Table height='550' border ref="selection" @on-selection-change="selectAll" :columns="columns7" :data="data6">
                </Table>
                <Spin size="large" fix v-if="loading"></Spin>
            </div>
            <!--修改框-->
            <!-- <Spin size="large" fix v-if="loading"></Spin> -->
            <Modal
                v-model="modal1"
                title="查看用户信息"
                >
                <Form ref="formValidate"  :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="姓名" prop="name">
                        <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="密码" prop="password">
                        <Input v-model="formValidate.password" placeholder="请输入邮箱"></Input>
                    </FormItem>
                    <FormItem label="城市" prop="city">
                        <Select v-model="formValidate.city" placeholder="请选择所在地">
                            <Option value="beijing">北京市</Option>
                            <Option value="shanghai">上海市</Option>
                            <Option value="shenzhen">深圳市</Option>
                            <Option value="hangzhou">杭州市</Option>
                            <Option value="guangzhou">广州市</Option>
                            <Option value="123">123</Option>
                        </Select>
                        <!--下拉框利用利用value匹配对应的选项-->
                    </FormItem>
                    <FormItem label="破蛋日">
                        <Row>
                            <Col span="11">
                                <FormItem prop="date">
                                    <DatePicker type="date" placeholder="您的生日" v-model="formValidate.date"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
                <div slot="footer">
                </div>
            </Modal>
            <!-- 批量删除确认模态框 -->
            <Modal v-model="isRemoveModal" width="360">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>确认删除</span>
                </p>
                <div style="text-align:center">
                    <p>你确定删除这些数据么，删除后不可恢复哦~</p>
                </div>
                <div slot="footer">
                    <Button type="error" size="large" long :loading="okremove_loading" @click="okremove">删除</Button>
                </div>
            </Modal>
            <div class="container y_tableBottom">
                <div class="row" >
                    <div class="y-tableBtn col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <Button @click="handleSelectAll(true)">设置全选</Button>
                        <Button @click="handleSelectAll(false)">取消全选</Button>
                    </div>
                    <div class="y_tablePage col-lo-9 col-md-9 col-sm-9 col-xs-12">
                        <Page :total='pageData.total' placement="top" size="small" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import  Base  from '../../assets/js/base.js'
    import {mapState, mapMutations} from 'vuex' //引入vuex状态管理


     export default {
        mixins: [Base],
        data () {
            return {
                module: 'users',//对basejs的传入模块
                modal1: false,//添加以及修改模态框的显示和消失
                isRemoveModal: false,//批量删除确认按钮
                okremove_loading:false,//批量删除模态框确定按钮loading加载
                isAllRemove: true,//判断是批量删除还是逐个删除的按钮
            	// value4: '',//搜索框
             //    loading: false,//表单懒加载
            	// modal1: false,//修改按钮
            	// formValidate: {//表单
             //        name: '',
             //        password: '',
             //        city: '',
             //        date: '',
             //        id: '',//表单的隐藏域用于储存id
             //    },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '您的生日', trigger: 'change' }
                    ]
                },
                columns7: [
                	{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        // width: 180,
                        ellipsis: true,
                        fixed: 'left',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '密码',
                        key: 'password',
                        // width: 220,
                        ellipsis: true,
                    },
                    {
                        title: '所在城市',
                        key: 'city',
                        // width: 120,
                        ellipsis: true,
                    },
                    {
                        title: '破蛋日 ',
                        key: 'date',
                        // width: 240,
                        ellipsis: true,
                    },
                    {
                        title: '操作',
                        key: 'action',
                        // width: 150,
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                            //利用params取到这条数据的唯一id
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index,params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                // data6: [//动态获取请求到的数据
                // ],
                // pageData: {
                //     total:20,
                //     limit: 10,
                //     page: 1,
                //     pages: 2,
                // },
                // select: []
            }
        },
        created() {
            this.$store.commit('setheaderLink','查询修改');
        },
        // created: function() {
        //     this.$http.post('http://localhost:3000/users/list', {
        //     })
        //     .then((response) => {//由于this的指向问题，需要使用箭头函数，使得this指向父级
        //         // console.log(response.data.rows[0]._id);
        //         this.data6 = response.data.rows;
        //         this.pageData.total = response.data.total;
        //     })
        //     .catch((response) => {
        //         console.log(response);
        //     });
        // },
        methods: {
            warning () {//警告提示框
                this.$Message.warning('使用批量删除才可以删除多项哦');
            },
            selectAll (selection) {//checkbox事件的触发
                this.select = selection;
                console.log(this.select);
            },
            // reload (item) {//对页面的重新载入
            //     item ? item:'';
            //     this.$http.post('http://localhost:3000/users/list', {   
            //     })
            //     .then((response) => {
            //         this.data6 = response.data.rows;
            //         this.pageData.total = response.data.total;

            //     })
            //     .catch((response) => {});
            // },
            // changePage(page){//分页方法
            //     this.loading = true;
            //     var that = this;
            //     var tableTimer = setTimeout(function() {
            //         that.loading = false;
            //     }, 600);

            //     this.$http({
            //         method:'POST',
            //         url:'http://localhost:3000/users/list',
            //         data:{
            //             page:page,
            //         }
            //     }).then((response)=>{
            //         this.data6 = response.data.rows;
            //     })
            // },
            // changePageSize(limit) {//一页最大数据数码
            //     this.loading = true;
            //     var that = this;
            //     var tableTimer = setTimeout(function() {
            //         that.loading = false
            //     }, 600);
            //     this.$http({
            //         method:'POST',
            //         url:'http://localhost:3000/users/list',
            //         data:{
            //             rows:limit
            //         }
            //     }).then((response)=>{
            //         this.data6 = response.data.rows;
            //     })
            // },
            // formDataUpdate (that_id){//表单修改
            //     this.$http({
            //         method:"POST",
            //         url:'http://localhost:3000/users/data'+that_id,
            //         data:this.formValidate
            //     })
            //     .then((response) => {
            //         this.reload();
            //     })
            //     .catch((response) => {
            //         console.log(response)
            //     });
            // },
            // formDataCreate (){//表单提交新数据
            //     var data = this.formValidate;
            //     // delete data.id;
            //    this.$http({
            //         method:"POST",
            //         url:'http://localhost:3000/users/data',
            //         data:this.formValidate
            //     })
            //     .then((response) => {
            //         this.reload();
            //     })
            //     .catch((response) => {
            //         console.log(response)
            //     });
            // },
            show (data) {
                this.modal1 = true;
                
                // 根据传递的参数进行数据载入
                this.formValidate.name = data.name;
                this.formValidate.password = data.password;
                this.formValidate.city = data.city;
                this.formValidate.date = data.date;
                this.formValidate.id = data._id;
            },
            // remove (index,id) {
            //     if (this.select == 0 ) {
            //         this.data6.splice(index, 1);
            //         this.$http({
            //             method:"DELETE",
            //             url:'http://localhost:3000/users/data'+id,
            //                 // data:this.formValidate
            //         })
            //         .then((response) => {
            //             this.reload();
            //         })
            //         .catch((response) => {
            //             console.log(response)
            //         });
            //     }
            //     else {
            //         this.warning();
            //         var idBox = [];
            //         for (var i = 0; i < this.select.length; i++) {
            //             idBox.push(this.select[i]._id);
            //         }
            //         console.log(idBox);
            //         this.$http({
            //             method:"DELETE",
            //             url:'http://localhost:3000/users/data'+idBox,
            //                 // data:this.formValidate
            //         })
            //         .then((response) => {
            //             console.log('成功')
            //             this.reload();
            //         })
            //         .catch((response) => {
            //             console.log(response)
            //         });
            //     }

            // },
            handleSelectAll (status) {//全选数据
                this.$refs.selection.selectAll(status);
            },
            handleSubmit (name) {//修改数据	,添加数据
                if (this.formValidate.id == null) {
                    console.log('这里进行提交新数据');
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.formDataCreate ();
                            this.$Message.success('提交成功!');
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }else {
                    console.log('修改');
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            console.log(this.formValidate.id);
                            this.formDataUpdate (this.formValidate.id);
                            this.$Message.success('修改成功!');
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }
                
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
    }
</script>

<style type="text/css" lang="scss" scoped>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    //头像上传的样式
	.container{
		width: auto;
		.y_top{
			padding:20px;
			.interval{
				margin:0 12px;
			}
		}
		.y_bottom{
			.y_table{
                position: relative
			}
			.y_tableBottom{
				margin:18px 0;
				.y-tableBtn{
					text-align:center
				}
				.y_tablePage{
					line-height: 32px;
					text-align: center;
				}
			}
		}
	}
</style>